<template>
  <div class="title fn-clear">
    <span class="title__text" :style="{ color: titleColor }">{{ title }}</span>
    <span class="sub_title_text" :style="{ color: subtitleColor }">{{ subtitle }}</span>
    <template v-if="moreUrl">
      <nuxtLink class="more_" :to="localePath(moreUrl)">更多<span>&gt;&gt;</span></nuxtLink>
    </template>
  </div>
</template>

<script setup>
const localePath = useLocalePath();
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true
  },
  moreUrl: {
    type: String,
    default: ''
  },
  titleColor: {
    type: String,
    default: '#1867CA'
  },
  subtitleColor: {
    type: String,
    default: '#666666'
  }
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/main' as *;

.title {
  width: $page-width;
  margin: auto;

  .title__text {
    font-size: 1.5rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    margin-left: .6rem;

    &::after {
      content: '｜';
      position: absolute;
      font-size: 1.4rem;
      font-weight: 900;
      background-color: var(--titleColor);
      top: 1px;
      left: -1.2rem;
    }
  }

  .sub_title_text {
    font-size: .875rem;
    margin-left: 1rem;
  }

  .more_ {
    font-size: 1rem;
    color: #1867CA;
    text-decoration: none;
    padding-right: 10px;
    float: right;
    margin-top: 6px;

    &>span {
      margin-left: 5px;
      vertical-align: 1px;
    }
  }

  @media screen and (max-width: 768px) {
    width: 100%;
    .title__text {
      font-size: 1.1rem;
      font-weight: 700;
      position: relative;
      &::after {
        content: '｜';
        position: absolute;
        font-size: 1.05rem;
        left:-1rem
      }
    }
    .sub_title_text {
      font-size: .75rem;
      margin-left: 1rem;
    }
    .more_ {
      font-size:.85rem;
      margin-top: 0;
    }
  }
}
</style>
